<template>
  <div class="container">
    <topTitle :titleText="`e-chart图表`"></topTitle>
    <div class="mainCon">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card title>
            <div slot="header" class="clearfix">
              <span>专户资金账目</span>
            </div>
            <div id="chart1" style="height: 500px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card title>
            <div slot="header" class="clearfix">
              <span>专户分布数量</span>
            </div>
            <div id="chart2" style="height: 500px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card title>
            <div slot="header" class="clearfix">
              <span>折线图</span>
            </div>
            <div id="chart3" style="height: 500px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card title>
            <div slot="header" class="clearfix">
              <span>漏斗图</span>
            </div>
            <div id="chart4" style="height: 500px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card title>
            <div slot="header" class="clearfix">
              <span>饼图</span>
            </div>
            <div id="chart5" style="height: 500px"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import topTitle from '@/components/publicCom/topTitle'

export default {
  data() {
    return {}
  },
  components: {
    topTitle,
  },
  mounted() {
    this.drawBar()
    this.drawDoubleBar()
    this.drawLine()
    this.drawFunnel()
    this.drawPie()
  },
  methods: {
    drawBar() {
      let barChart = this.$echarts.init(document.getElementById('chart1'))
      barChart.setOption({
        color: [
          '#67e0e3',
          '#ff9f7f',
          '#32c5e9',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3',
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          orient: 'vertical',
          right: '20px',
          top: '40%',
          data: ['专户余额', '缴纳支出', '专户支出'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'value',
          },
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            data: ['武汉', '宜昌', '恩施', '黄石', '鄂州', '咸宁', '随州'],
          },
        ],
        series: [
          {
            name: '专户余额',
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
            },
            data: [200, 170, 240, 244, 200, 220, 210],
          },
          {
            name: '专户支出',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
            },
            data: [320, 302, 341, 374, 390, 450, 420],
          },
          {
            name: '缴纳支出',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'left',
            },
            data: [-120, -132, -101, -134, -190, -230, -210],
          },
        ],
      })
    },
    drawDoubleBar() {
      let barChart = this.$echarts.init(document.getElementById('chart2'))
      barChart.setOption({
        color: [
          '#67e0e3',
          '#ff9f7f',
          '#32c5e9',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3',
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['政府投资', '非政府投资', '政府与社会共筹', '其他'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['武汉', '宜昌', '恩施', '黄石', '鄂州', '咸宁', '随州'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '政府投资',
            type: 'bar',
            stack: '已开户',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '非政府投资',
            type: 'bar',
            stack: '已开户',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: '政府与社会共筹',
            type: 'bar',
            stack: '已开户',
            data: [150, 232, 201, 154, 190, 330, 410],
          },

          {
            name: '其他',
            type: 'bar',
            barWidth: 5,
            stack: '已开户',
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
          {
            name: '政府投资',
            type: 'bar',
            stack: '未开户',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '非政府投资',
            type: 'bar',
            stack: '未开户',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: '政府与社会共筹',
            type: 'bar',
            stack: '未开户',
            data: [150, 232, 201, 154, 190, 330, 410],
          },

          {
            name: '其他',
            type: 'bar',
            barWidth: 5,
            stack: '未开户',
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
        ],
      })
    },
    drawLine() {
      let barChart = this.$echarts.init(document.getElementById('chart3'))
      barChart.setOption({
        color: [
          '#67e0e3',
          '#ff9f7f',
          '#32c5e9',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3',
        ],
        title: {
          text: '折线图堆叠',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['邮件营销'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [66, 72, 112, 161, 171, 262, 248],
          },
        ],
      })
    },
    drawFunnel() {
      let barChart = this.$echarts.init(document.getElementById('chart4'))
      barChart.setOption({
        color: [
          '#67e0e3',
          '#ff9f7f',
          '#32c5e9',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3',
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%',
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          data: ['在建项目数', '开设专户项目数', '已缴存专户项目数'],
        },
        series: [
          {
            name: '实际',
            type: 'funnel',
            left: '10%',
            width: '80%',
            maxSize: '90%',
            minSize: '30%',
            label: {
              position: 'inside',
              formatter: '{c}',
              color: '#fff',
            },
            itemStyle: {
              opacity: 0.5,
              borderColor: '#fff',
              borderWidth: 2,
            },
            emphasis: {
              label: {
                position: 'inside',
                formatter: '{b}实际: {c}%',
              },
            },
            data: [
              { value: 3156, name: '在建项目数' },
              { value: 2865, name: '开设专户项目数' },
              { value: 1137, name: '已缴存专户项目数' },
            ],
          },
        ],
      })
    },
    drawPie() {
      let barChart = this.$echarts.init(document.getElementById('chart5'))
      barChart.setOption({
        color: [
          '#67e0e3',
          '#ff9f7f',
          '#32c5e9',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3',
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {d}%',
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        legend: {
          //  orient: 'vertical',
          left: 'bottom',
          data: ['A级项目', 'B级项目', 'C级项目', 'D级项目', '暂未评级'],
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 192, name: 'A级项目' },
              { value: 117, name: 'B级项目' },
              { value: 77, name: 'C级项目' },
              { value: 110, name: 'D级项目' },
              { value: 30, name: '暂未评级' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  top: 213px;
}
</style>
